<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar title="线索接单"> </mt-navbar>
      </template>
      <view v-if="dataList.length" class="px-32rpx pt-16rpx">
        <view v-if="statistics.totalSize > 0" class="text-center mb-16rpx">
          <text class="text-28rpx text-#727687">当前有{{ statistics.totalSize }}个线索待您接单</text>
        </view>
        <view v-for="item in dataList" :key="item.id" class="list-li bg-#ffffff mb-24rpx px-32rpx py-32rpx rd-8rpx" @click="goDetail(item)">
          <view class="flex items-center justify-between pb-8rpx">
            <view class="flex-1 min-w-0 mr-10rpx">
              <text class="text-32rpx text-#1A1A1A font-bold">{{ item.productName }}</text>
            </view>
            <view class="flex items-center">
              <image
                class="w-32rpx h-32rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-static-loading.svg"
              ></image>
              <text class="text-24rpx text-#1484EE ml-8rpx">待您接单</text>
            </view>
          </view>
          <view class="flex mt-24rpx bg-[rgba(247,119,92,0.05)] px-24rpx py-16rpx rd-8rpx">
            <image
              class="w-32rpx h-32rpx mr-16rpx mt-6rpx"
              src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clock1.svg"
            ></image>
            <view class="flex-1 min-w-0 text-28rpx text-#F7775C">
              <view v-if="!item.isEnd"
                >倒计时：<count-down :endtime="item.timeOutReallocateTime" @end="handleEndTime(item)"></count-down>，超时将重新分配！</view
              >
              <view v-else>已重新分配</view>
            </view>
          </view>
          <view class="mt-24rpx flex bg-#F5F5F5 p-16rpx">
            <view class="w-132rpx text-right text-24rpx text-#727687">所属分类：</view>
            <view class="flex-1 min-w-0 text-24rpx text-#727687 break-all">{{ item.productCategoryParentName }}</view>
          </view>
          <view class="mt-24rpx flex">
            <view class="w-150rpx text-right text-28rpx text-#727687">发布城市：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all">{{ item.city }}</view>
          </view>
          <view class="mt-24rpx flex">
            <view class="w-150rpx text-right text-28rpx text-#727687">联系人：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all">{{ item.contactsName }} {{ item.contactsPhone }}</view>
          </view>
          <view class="mt-24rpx flex line-height-28rpx">
            <view class="w-150rpx text-right text-28rpx text-#727687">创建时间：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</view>
          </view>
          <view class="flex justify-between mt-32rpx" @click.stop>
            <view>
              <mt-button
                v-if="item.phoneReceiveFlag === 1"
                class="apply-btn black"
                type="info"
                shape="circle"
                size="mini"
                :shake="false"
                @click="goRefuse(item)"
                >拒绝接单</mt-button
              >
            </view>
            <view>
              <mt-button class="apply-btn black" type="info" shape="circle" size="mini" :shake="false" @click="openFollow(item)">跟进</mt-button>
              <mt-button
                v-if="item.phoneReceiveFlag === 1"
                class="apply-btn"
                shape="circle"
                size="mini"
                style="margin-left: 16rpx"
                :shake="false"
                @click="handleReceive(item)"
                >接单</mt-button
              >
              <mt-button
                v-if="item.phoneReceiveFlag !== 1"
                class="apply-btn"
                shape="circle"
                size="mini"
                style="margin-left: 16rpx"
                :shake="false"
                @click="makePhoneCall(item)"
              >
                <image
                  class="w-24rpx h-24rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-phone.svg"
                ></image>
                <text>电话接单</text>
              </mt-button>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { cluegetCluePage, cluephoneReceive, cluereceive } from '@/subClue/api/index';
import countDown from '@/subClue/components/count-down.vue';
import dayjs from 'dayjs';

function handleEndTime(item) {
  item.isEnd = true;
}

function goDetail(item) {
  uni.navigateTo({
    url: `/subClue/pages/receivingDetail?id=${item.id}`
  });
}

function openFollow(item) {
  uni.navigateTo({
    url: `/subClue/pages/followUp?id=${item.id}`
  });
}

function goRefuse(item) {
  uni.navigateTo({
    url: `/subClue/pages/refuseOrder?id=${item.id}`
  });
}

function handleReceive(item) {
  isReceive.value = true;
  cluereceive({ clueId: item.id })
    .then((res) => {
      uni.showToast({
        icon: 'none',
        title: '操作成功',
        duration: 1000
      });
      setTimeout(() => {
        pagingRef.value.reload();
      }, 1000);
    })
    .catch(() => {
      isReceive.value = false;
    });
}

function makePhoneCall(item) {
  cluephoneReceive({ clueId: item.id }).then((res) => {
    uni.makePhoneCall({
      phoneNumber: res.data.virtualPhone,
      success: () => {
        pagingRef.value.refresh();
      }
    });
  });
}

const statistics = reactive({
  totalSize: 0
});

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      type: '2',
      clueStatus: 0,
      productCategoryIds: []
    };
    const res = await cluegetCluePage(params);
    const list = res.data.items;
    if (isReceive.value && list.length <= 0) {
      uni.navigateTo({
        url: '/subClue/pages/myRelease?type=2'
      });
      return;
    }
    for (const item of list) {
      item.isEnd = false;
      const p_name = JSON.parse(item.productCategoryName);
      item.productCategoryParentName = p_name[0];
      item.productCategoryName = p_name[1];
    }

    statistics.totalSize = res.data.totalSize;
    lastId.value = list[list.length - 1]?.id;
    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

const isReceive = ref(false);
onShow(() => {
  dataList.value = [];
  isReceive.value = false;
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.list-li {
  .apply-btn.mt-button {
    font-size: 28rpx;
    padding: 16rpx 24rpx;
  }
  .black.mt-button {
    color: #1a1a1a;
  }
}
</style>
